import woman from '@/assets/b_woman.png';
import img from '@/assets/bottom_arrow.png';
import icon from '@/assets/cash_arrow.png';
import arrow from '@/assets/g_arrow.png';
import AuthButton from '@/components/AuthButton';
import UseScroolIntoView from '@/components/UseScroolIntoView';
import { getRebate } from '@/services/center';
import { useRequest } from 'ahooks';
import { Collapse, Divider, Flex, Space, Typography } from 'antd';
import React, { useState } from 'react';
import parser from 'react-html-parser';
import { Helmet, useIntl } from 'umi';
import ApplyNowModal from '../Product/components/ApplyNowModal';
const CashBack: React.FC = () => {
  const intl = useIntl();
  const [record, setRecord] = useState<Partial<Center.ProductList>>();
  const [visible, setVisible] = useState(false);
  const isEn = intl.locale == 'en-US';
  UseScroolIntoView();
  const list = [
    { title: 'center.rewards', word: 'center.rewards_word' },
    { title: 'center.loan_amount', word: 'center.loan_amount_word' },
    { title: 'center.on_time', word: 'center.on_time_word' },
    { title: 'center.planning', word: 'center.planning_word' },
  ];
  const getBackList = [
    'center.apply_loan',
    'center.pass',
    'home.get_condition',
    'home.get_cash',
    'center.platform_audit',
    'home.apply_price',
  ];
  const { data } = useRequest(getRebate);
  const rebateList = data?.data;
  const activityList = [
    {
      title: 'center.back',
      key: isEn ? 'platformRebateEn' : 'platformRebate',
      color: '#0070DF',
      bgColor: '#E4EFFF',
    },
    {
      title: 'center.activity_word',
      key: isEn ? 'rebateEn' : 'rebate',
      color: '#FF8F00',
      bgColor: '#FFEFE8',
    },
  ];

  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.cash_meta_title' })}</title>
      </Helmet>
      <div className="cashback">
        <div className="cashback_top" style={{ overflow: 'hidden' }}>
          {/* <div className="cashback_top_circle" /> */}
          {/* <div className="cashback_top_bg" /> */}
          <div className="common" style={{ color: '#fff', position: 'relative' }}>
            <Space
              size={0}
              style={{
                display: 'flex',
                minHeight: 280,

                justifyContent: 'space-between',
                alignItems: 'center',
              }}
            >
              <div style={{}}>
                <div style={{ fontSize: 38, fontWeight: 700 }}>
                  {intl.formatMessage({ id: 'home.index_word2' })}
                </div>
                <div style={{ fontSize: isEn ? 24 : 30, marginTop: 10 }}>
                  {intl.formatMessage(
                    { id: 'home.cash_suc' },
                    {
                      num: (
                        <span className="cashback_number" style={{ fontSize: isEn ? 40 : 60 }}>
                          $10,000
                        </span>
                      ),
                    },
                  )}
                </div>
              </div>
              <img
                style={{ position: 'absolute', bottom: 0, right: 0, zIndex: 2 }}
                height={265}
                src={woman}
              />
              <div
                style={{
                  width: 344,
                  height: 150,
                  transform: 'rotate(-140deg)',

                  position: 'absolute',
                  background: '#1C5FE580',

                  bottom: -100,
                  right: 70,
                  borderRadius: 8,
                }}
              />
              <div
                style={{
                  width: 120,
                  height: 120,
                  transform: 'rotate(-140deg)',

                  position: 'absolute',
                  background: '#1c5fe5',
                  bottom: 0,
                  right: 340,
                  borderRadius: 8,
                }}
              />
              <div
                style={{
                  width: 409,
                  height: 259,
                  transform: 'rotate(-140deg)',

                  position: 'absolute',
                  background: '#1c5fe4',
                  top: -236,
                  right: 114,
                  borderRadius: 12,
                }}
              />
              <div
                style={{
                  width: 448,
                  height: 229,
                  transform: 'rotate(-140deg)',

                  position: 'absolute',
                  background: '#1c5fe4',
                  top: 200,
                  right: -250,
                  borderRadius: 12,
                  zIndex: 1,
                }}
              />
            </Space>
          </div>
        </div>
        <div className="cashback_mode" id="mode">
          {/* <div className="cashback_mode_topBg" /> */}
          <div className="common" style={{ position: 'relative', zIndex: 2 }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 30, color: '#333', fontWeight: 'bold', paddingTop: 65 }}>
                {intl.formatMessage({ id: 'home.cash_price1' })}
              </div>
              <div style={{ fontSize: 16, color: '#999', margin: '10px 0 40px 0' }}>
                {intl.formatMessage({ id: 'home.cash_suc' }, { num: <span>HK$10000</span> })}
              </div>
            </div>
            <Flex gap={20} style={{ marginBottom: 55 }} justify="space-between">
              {list.map((item, index) => {
                const { word, title } = item;
                return (
                  <div
                    key={title}
                    style={{
                      padding: '30px',
                      boxShadow: '0px 4px 40px 0px #EFEFEF',
                      borderRadius: 6,
                      background: '#fff',
                      flex: 1,
                    }}
                  >
                    <img width={40} height={40} src={require(`@/assets/mode${index + 1}.png`)} />
                    <div
                      style={{
                        fontSize: isEn ? 14 : 18,
                        fontWeight: 'bold',
                        color: '#333',
                        margin: '20px 0 12px 0',
                      }}
                    >
                      {intl.formatMessage({ id: title })}
                    </div>
                    <div
                      style={{
                        fontSize: isEn ? 15 : 16,
                        color: '#666',

                        fontWeight: 'lighter',
                        lineHeight: isEn ? '21px' : '26px',
                      }}
                    >
                      {intl.formatMessage({ id: word })}
                    </div>
                  </div>
                );
              })}
            </Flex>
          </div>
          <img src={img} className="cashback_mode_bottomBg" />
        </div>
        <div className="cashback_way" id="way">
          <div className="common">
            <Flex style={{ padding: '50px 0 40px 0' }} gap={10} align="center" justify="center">
              <div className="cashback_way_img" />
              <div
                style={{
                  fontSize: 30,
                  textAlign: 'center',
                  color: '#fff',
                  fontWeight: 'bold',
                }}
              >
                {intl.formatMessage({ id: 'home.how_get_cash' })}
              </div>
              <div className="cashback_way_img" />
            </Flex>
            <Space size={70} wrap style={{ padding: '0 53px 101px' }}>
              {getBackList.map((item, cIndex) => {
                const index = cIndex == 3 ? 5 : cIndex == 5 ? 3 : cIndex;
                return (
                  <div key={item} style={{ position: 'relative' }}>
                    <Flex align="center" gap={32}>
                      <Flex style={{ flexDirection: 'column' }} align="center">
                        <div
                          style={{
                            padding: '0 0  21px 0',
                            width: 210,
                            borderRadius: '8px',
                            backgroundColor: '#fff',
                            color: '#333',
                            fontSize: 16,
                            textAlign: 'right',
                            position: 'relative',
                          }}
                          className={
                            [2, 5].includes(index)
                              ? ''
                              : [0, 1].includes(index)
                              ? 'cashback_way_right_triangle'
                              : 'cashback_way_left_triangle'
                          }
                        >
                          <div className="cashback_way_number">0{index + 1}</div>
                          <div style={{ textAlign: 'center' }}>
                            <img width={50} src={require(`@/assets/back${index + 1}.png`)} />
                            <div style={{ marginTop: 10 }}>{intl.formatMessage({ id: item })}</div>
                          </div>
                        </div>
                      </Flex>
                      {cIndex !== getBackList.length - 1 ? (
                        <img
                          className={index == 2 ? 'cashback_way_arrow' : ''}
                          style={{ transform: `rotate(${index > 2 ? 180 : 0}deg)` }}
                          src={arrow}
                          width={105}
                          height={70}
                        />
                      ) : null}
                    </Flex>
                  </div>
                );
              })}
            </Space>
          </div>
        </div>
        <div className="cashback_activity common" id="activity">
          <div
            style={{ color: '#333', fontSize: 30, fontWeight: 'bold', padding: '60px 0 40px 0' }}
          >
            {intl.formatMessage({ id: 'home.cash_activity' })}
          </div>
          <div className="cashback_activity_main">
            {rebateList?.map((item) => {
              const { id, merchantLogo, productName, rebateMaxAmount } = item;
              return (
                <div
                  key={id}
                  style={{
                    position: 'relative',
                    border: '1px solid #eee',
                    borderRadius: 6,
                    padding: '40px 30px',
                    marginBottom: 40,
                  }}
                >
                  <Flex justify="space-between">
                    <Flex>
                      <img src={merchantLogo} height={35} />
                      <div style={{ marginLeft: 20 }}>
                        <div style={{ fontSize: 20, color: '#333' }}>{productName}</div>
                        {rebateMaxAmount ? (
                          <div
                            style={{
                              marginTop: 10,
                              fontSize: 16,
                              color: '#333',
                              fontWeight: 'lighter',
                            }}
                          >
                            {intl.formatMessage(
                              { id: 'center.on_time_back' },
                              { num: rebateMaxAmount },
                            )}
                          </div>
                        ) : null}
                      </div>
                    </Flex>
                    <Space size={0}>
                      <AuthButton
                        onClick={() => {
                          setVisible(true);
                          setRecord(item);
                        }}
                        type="primary"
                        className="cashback_btn"
                        style={{ height: 40, width: 120 }}
                      >
                        <Space size={0}>
                          {intl.formatMessage({ id: 'center.apply_now' })}
                          <div className="cashback_btn_bg" />
                        </Space>
                      </AuthButton>
                    </Space>
                  </Flex>
                  <div style={{ position: 'relative' }}>
                    <Collapse
                      collapsible="icon"
                      expandIcon={({ isActive }) => {
                        return (
                          <Flex className="position" justify="center" align="center">
                            <Space size={10}>
                              <div style={{ color: '#666', fontSize: 16 }}>
                                {intl.formatMessage({
                                  id: isActive ? 'home.hide_info' : 'center.know',
                                })}
                              </div>
                              <Flex>
                                <img
                                  src={icon}
                                  width={16}
                                  className={`cashback_activity_main_icon ${
                                    isActive ? '' : 'rote'
                                  }`}
                                />
                              </Flex>
                            </Space>
                          </Flex>
                        );
                      }}
                      ghost
                    >
                      <Collapse.Panel key={1} header="">
                        {/* 平台返利和机构活动 */}
                        <Divider style={{ width: '105.4%', margin: '20px -30px' }} />
                        <>
                          {activityList.map((v) => {
                            const { key, title, color, bgColor } = v;
                            return (
                              <div
                                style={{
                                  padding: '20px 30px',
                                  borderRadius: 6,
                                  backgroundColor: bgColor,
                                  marginTop: 20,
                                  fontSize: 16,
                                  fontWeight: 700,
                                  color: '#333',
                                }}
                                key={key}
                              >
                                <div
                                  style={{
                                    fontSize: 18,
                                    fontWeight: 'bold',
                                    color,
                                    marginBottom: 10,
                                  }}
                                >
                                  {intl.formatMessage({ id: title })}
                                </div>
                                <Typography.Paragraph
                                  ellipsis={{
                                    rows: 5,
                                    expandable: 'collapsible',
                                    symbol(expanded) {
                                      return intl.formatMessage({
                                        id: expanded ? 'home.collapse' : 'home.expand',
                                      });
                                    },
                                  }}
                                >
                                  {parser(item[key])}
                                </Typography.Paragraph>
                              </div>
                            );
                          })}
                        </>
                      </Collapse.Panel>
                    </Collapse>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <ApplyNowModal
          visible={visible}
          data={record || {}}
          handleCancel={() => {
            setVisible(false);
            setRecord({});
          }}
        />
      </div>
    </>
  );
};

export default CashBack;
